<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<style>
    div {

        width: 100px;
        height: 100px;
        line-height: 100px;
        float: left;
        margin-right: 30px;
        text-align: center;
        background: rgba(0, 0, 0, .5)
    }

    img {
        width: 100px;
        height: 100px;
    }

    .borderTransparent {
        background: red;
        border: 10px solid rgba(0, 0, 0, .1);
        background-clip: padding-box;
    }

    .boxShow {
        box-shadow: 0 0 0 15px red,
        0 0 0 20px black,
        0px 0px 40px 20px yellow;
    }

    .calc {
        background: url(image/1.png) no-repeat;
        background-position: calc(100% - 10px) calc(100% - 10px);
        border: 1px solid #000;
    }

    .linearGradient {
        /*background: repeating-linear-gradient(
               45deg,
               red 25%,
               green 0%,
               green 50%,
               yellow 50%,
               yellow 75%,
               black 0% 30px
            );*/
        background: repeating-linear-gradient(
                60deg,
                red,
                red 15px,
                green 0px,
                green 30px,
                black 0px,
                black 45px
        );
        /*background-size:45px 45px ;*/
    }

    .background-bgimg {
        /* background: #58a;
         background-image: repeating-linear-gradient(45deg,
                     rgba(255,0,0,.1) 0,
                     rgba(255,0,0,.1) 15px,
                     red 0%,
                     red 30px)*/
        background: red;
        background-image: repeating-linear-gradient(30deg,
        hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, .5) 15px,
        transparent 0, transparent 30px);
    }

    .stripe {
        background: #fff;
        background-image: linear-gradient(rgba(255, 0, 0, .5) 50%, transparent 0),
        linear-gradient(90deg, rgba(255, 0, 0, .5) 50%, transparent 0);
        -webkit-background-size: 10px 10px;
        background-size: 10px 10px;
    }

    .lineBackground {
        background: blue;
        background-image: linear-gradient(white 1px, transparent 0px),
        linear-gradient(90deg, white 1px, transparent 0px),
        linear-gradient(white 2px, transparent 0),
        linear-gradient(90deg, white 2px, transparent 0);
        /*-webkit-background-size: 10px 10px;*/
        background-size: 10px 10px, 10px 10px, 40px 40px, 40px 40px;
        /*background-repeat: no-repeat;*/
    }

    .radialBackground {
        background: #000;
        background-image: radial-gradient(blue 30%, transparent 0),
        radial-gradient(blue 30%, transparent 0);
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
    }

    .chessboard {
        background: #ccc;
        background-image: linear-gradient(90deg, transparent 50%, blue 0),
        linear-gradient(transparent 50%, red 0),
        linear-gradient(90deg, transparent 50%, blue 0),
        linear-gradient(transparent 50%, red 0);
        background-size: 30px 30px;
        background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
        /*background-repeat: no-repeat;*/
    }

    .randomColor {
        width: 900px;
        background: tan;
        background-image: linear-gradient(90deg, green 10px, transparent 0),
        linear-gradient(90deg, red 20px, transparent 0),
        linear-gradient(90deg, black 50px, transparent 0);
        background-size: 40px 100%, 40px 100%, 40px 100%;
        /*background-repeat: no-repeat;*/
    }

    .borderImage {
        border: 15px solid transparent;
        border-image: 33.4% url(image/2.jpg);
    }

    .borderImage2 {
        /*padding: 15px;*/
        border: 15px solid transparent;
        box-sizing: border-box;
        background: linear-gradient(#fff, #fff),
        url(image/2.jpg);
        background-size: cover;
        background-clip: padding-box, border-box;
        /*    width: 500px;
            height: 500px;*/
    }

    @keyframes ant {
        to {
            background-position: 100% 100%;
        }
    }

    .borderLetter {
        border: 1px solid transparent;
        /**/
        background: linear-gradient(#fff, #fff) padding-box,
        repeating-linear-gradient(45deg, black 0, black 25%,
                transparent 0, transparent 50%
        );
        background-size: 10px 10px;
        background-position: 0;
        animation: ant 2s linear infinite;
    }
    .test{
        background:repeating-linear-gradient(45deg ,yellowgreen,#58a 30px);

    }
    .xinfeng{
        border: 5px solid transparent;
        padding:5px;
        background:
                    repeating-linear-gradient(-45deg,red 0%,red 12.5%,transparent  12.5%,transparent 25%,#58a 25%,#58a 37.5%,transparent 37.5%,transparent 50%)0px/ 40px 40px;
    }
</style>
<body>

<ul>
    <div class="borderTransparent">
        边框透明
    </div>
    <div class="boxShow">
        阴影和外边款
    </div>
    <div class="calc">
        calc计算
    </div>
    <div class="linearGradient">
        水平背景渐变
    </div>
    <div class="background-bgimg">
        背景和背景图片
    </div>
    <div class="stripe">
        条纹背景
    </div>
    <div class="lineBackground">
        线条背景
    </div>
    <div class="radialBackground">
        波点背景
    </div>
    <div class="chessboard">
        棋盘
    </div>
    <div class="randomColor">
        随机背景条纹
    </div>
    <div class="borderImage">
        边框图片背景
    </div>
    <div class="borderImage2">
        边框图片背景2
    </div>
</ul>
<div class="borderLetter">
    蚂蚁线
</div>
<div class="test">
    test
</div>
<div class="xinfeng">
    信封
</div>
</body>
</html> 